<template>
  <div
      style="
      width: 100%;
      height: 100vh;
      overflow: hidden;
    "
      :style="bg"
  >
    <!--  :style="bg" 加背景图片-->
    <!--    <div style="width: 400px; margin: 100px 100px;background-color: white" >-->
    <div class="login-form">
      <div class="title">用户登录</div>
      <el-form ref="loginForm" :model="loginForm" size="normal">
        <el-form-item prop="phone">
          <el-input
              prefix-icon="el-icon-user-solid"
              v-model="loginForm.phone"
              placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              prefix-icon="el-icon-lock"
              v-model="loginForm.password"
              show-password
              placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            <el-input
                prefix-icon="el-icon-key"
                v-model="loginForm.code"
                style="width: 50%"
                placeholder="请输入验证码"
            ></el-input>
            <!-- <ValidCode @input="createValidCode" /> -->
            <el-image :src="captchaUrl" class="image" @click="captcha()"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="login(loginForm.code)"
          >登 录
          </el-button
          >
          <el-tooltip placement="top">
            <template #content>
              <img :src="url" alt="" style="width: 100px;height: 100px">
            </template>
            <el-button style="margin-left: 100px;margin-top: 20px" type="primary">忘记密码</el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ValidCode from "../../components/ValidCode/ValidCode";
import request from "../../utils/request";

export default {
  components: {
    ValidCode,
  },
  name: "Login",
  data() {
    return {
      captchaUrl: '',
      url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      loginForm: {
        phone: '',
        password: '',
        code: '',
      },
      rules: {
        phone: [
          {required: true, message: "请输入用户名", trigger: "blur"},
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
      },
      // 加背景图片
      bg: {
        backgroundImage: "url(" + require("@/assets/bg.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
      },
    };
  },
  mounted() {
    this.captcha()
    console.log("2222");
    var t = this;
    document.onkeydown = function (e) {
      if (window.event == undefined) {
        var key = e.keyCode;
      } else {
        var key = window.event.keyCode;
      }
      //enter的ASCII码是13
      if (key == 13) {
        t.login(t.loginForm.code);//t.登录方法

      }
    }
  },
  methods: {
    captcha() {
      request.get("/getcode", {responseType: "blob"},).then((res) => {
        var item = window.sessionStorage.getItem("captcha");
        this.captchaUrl = window.URL.createObjectURL(res.data)
        console.log(this.captchaUrl)
      })
    },
    login(code) {
      let reg = /^1[3456789]\d{9}$/
      if (!reg.test(this.loginForm.phone)) {
        this.$message({
          type: "error",
          message: '手机号格式不对，请重新输入'
        });
        return;
      }
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          request.post("/user/login", {
                phone: this.loginForm.phone,
                password: this.loginForm.password,
                code: code,
              }
          ).then((res) => {
            if (res.data.data === 201) {
              this.$message({
                type: "success",
                message: res.data.name + "登录成功",
              });
              sessionStorage.setItem("user", JSON.stringify(res.data)); // 缓存用户信息
              this.$router.push("/gradeCalute"); //登录成功之后进行页面的跳转，跳转到主页
            } else if (this.loginForm.code === '') {
              this.$message({
                type: "error",
                message: '账号或密码为空,',
              });
            } else {
              this.$message({
                type: "error",
                message: '用户不存在请登陆,',
              });
              this.$router.push("/register"); //登录成功之后进行页面的跳转，跳转到主页
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.login-form {
  position: absolute;
  left: 70%;
  right: 0;
  width: 350px;
  max-width: 100%;
  padding: 35px 35px 15px 35px;
  margin: 120px auto;
  transform: translate(-50%, 0);
  background-color: #ffffff;
}

.title {
  font-size: 26px;
  font-weight: 400;
  color: #596b75;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}

.image {
  margin-left: 10px;
  text-align: center;
  /* line-height: 37px; */
  height: 40px;
}
</style>
